<%--
  Created by IntelliJ IDEA.
  User: user
  Date: 2025/10/26
  Time: 15:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>用户登录</title>
  <style>
    body {
      background:url("./学校背景图片.jpg");
      background-size:cover;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      font-family: Arial, sans-serif;
    }

    .register-form {
      padding: 30px;
      border: 1px solid #ccc;
      border-radius: 10px;
      width: 300px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      background-color: rgba(255, 255, 255, 0.8);

    }

    .form-group {
      margin-bottom: 20px;
      position: relative; /* 用于定位密码框内的眼睛按钮 */
    }

    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }

    input[type="text"],
    input[type="password"] {
      width: 100%;
      padding: 10px 40px 10px 10px; /* 右侧留空间给眼睛按钮的空间 */
      border: 1px solid #ddd;
      border-radius: 5px;
      box-sizing: border-box;
    }

    /* 密码框眼睛按钮样式 */
    .toggle-password {
      position: absolute;
      right: 10px;
      top: 70%; /* 垂直居中（相对于输入框） */
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      font-size: 18px;
      color: #666;
    }

    .buttons {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
    }

    button {
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      flex: 1;
      margin: 0 5px;
    }

    .submit-btn {
      background-color: #4CAF50;
      color: white;
    }

    .back-btn {
      background-color: #008CBA;
      color: white;
    }

    button:hover {
      opacity: 0.8;
    }
  </style>
</head>
<body>
<div class="register-form">
  <h2 style="text-align: center; margin-bottom: 30px;">用户登录</h2>
  <form action="register" method="post">
    <div class="form-group">
      <label for="username">用户名：</label>
      <input type="text" id="username" name="username" required>
    </div>

    <div class="form-group">
      <label for="password">密码：</label>
      <input type="password" id="password" name="password" required>
      <!-- 密码显示/隐藏按钮 -->
      <button type="button" class="toggle-password" onclick="togglePassword('password', this)">👁️</button>
    </div>


    <div class="buttons">
      <button type="submit" class="submit-btn">登录</button>
      <button type="button" class="back-btn" onclick="window.location.href='register.jsp'">注册</button>
    </div>
  </form>
</div>

<script>
  // 切换密码显示/隐藏的函数
  function togglePassword(inputId, button) {
    // 获取密码输入框元素
    const passwordInput = document.getElementById(inputId);
    // 判断当前输入框类型（password/text）
    const isPassword = passwordInput.type === 'password';

    // 切换输入框类型（核心逻辑）
    passwordInput.type = isPassword ? 'text' : 'password';
    // 切换按钮图标（睁眼/闭眼）
    button.textContent = isPassword ? '👁️‍🗨️' : '👁️';
  }
</script>
</body>
</html>
